<template>
	<view :class="['barrage',{'first':index==0}]" :animation="index!=0?animationData:firstAnimation" ref="ani">
		<view class="bg" :style="[{backgroundImage:'url('+getImagesrc(info.level_id)+')'},{backgroundSize: '100% 100%'}]">
			<view class="avatar" :style="{ backgroundImage: `url(${info.headimg||require('@/static/image/avatar.png')})` }">
			</view>
			<view class="content">
				<view class="text-sm">
					<view class="text-content">
						{{ info.nickname }}抽中了{{info.box_level}}
					</view>
				</view>
				<image class="good" :src="$util.img(info.sku_img+'?x-oss-process=image/resize,h_60,w_60,m_fixed')" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Barrage',
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			index: {
				type: Number,
				default: () => {
					return 0;
				}
			}
		},
		data() {
			return {
				animationData: {},
				firstAnimation: {}
			};
		},
		created() {
		},
		mounted() {
			if(this.index==0){
				this.disappear();
			}else{
				this.donghua();
			}
		},
		methods: {
			donghua() {
				this.animationData = uni
					.createAnimation({
						duration: 2000,
						timingFunction: 'ease',
						delay: 2000
					})
					.top(20)
					.left(14)
					.opacity(1)
					.scale(1, 1)
					.step()
					.export();
				setTimeout(() => {
					// 消失
					this.animationData = uni
						.createAnimation({
							duration: 800,
							timingFunction: 'ease'
						})
						.top(35)
						.opacity(0)
						.step()
						.export();
				}, 5000)
			},
			disappear() {
				setTimeout(() => {
					// 消失
					this.firstAnimation = uni
						.createAnimation({
							duration: 800,
							timingFunction: 'ease'
						})
						.top(35)
						.opacity(0)
						.step()
						.export();
				}, 3000)
			},
			getImagesrc(type) {
				switch (type) {
					case 1:
						return require('@/static/image/barrage-max.png');
					case 2:
						return require('@/static/image/barrage-special.png');
					case 3:
						return require('@/static/image/barrage-hide.png');
					case 4:
					    return require('@/static/image/barrage-pt.png');
					default:
						break;
				}

			},
		}
	};
</script>

<style lang="scss" scoped>
	.barrage {
		position: absolute;
		z-index: 5;
		width: 452rpx;
		height: 51rpx;
		border-top-left-radius: 50%;
		border-bottom-left-radius: 50%;
		top: 107rpx;
		left: -5rpx;
		opacity: 0.5;
		transform: scale(0.8);

		&.first {
			top: 44rpx;
			opacity: 1;
			transform: scale(1);
			left: 26rpx;
			// animation: hidden 0.3s linear 2s forwards;
		}

		@keyframes hidden {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
				transform: scale(0.8);
				top: 70rpx;
				left: -5rpx;
			}
		}

		.bg {
			background-size: 100% 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			padding: 3rpx;
			box-sizing: border-box;
			position: relative;

			.avatar {
				/* #ifndef APP-NVUE */
				font-variant: small-caps;
				display: inline-flex;
				white-space: nowrap;
				background-size: cover;
				background-position: center;
				vertical-align: middle;
				/* #endif */
				margin-right: 10rpx;
				padding: 0;
				text-align: center;
				justify-content: center;
				align-items: center;
				// background-color: #ccc;
				color: #ffffff;
				position: relative;
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.content {
				display: flex;
				align-items: center;

				.text-sm {
					.text-content {
						font-size: 24rpx;
						color: #ffffff;
						// transform: scale(0.8);
						width: 232rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}

				.good {
					width: 42rpx;
					height: 31rpx;
					position: absolute;
					right: 17rpx;
				}
			}

		}
	}
</style>
